<template>
    <a-modal v-model:visible="show"
             :title="titleName"
             :width="800"
             :maskClosable="false"
             :maskStyle="{ background: 'rgba(179,212,218,0.30)', backdropFilter: 'blur(10px)' }"
             :destroyOnClose="true"
             @ok="handleOk"
             @cancel="cancelModal">
        <a-form :model="formState" :labelCol="{span: 10}" ref="formData">
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="商品名称" name="goodsName">
                        <a-input v-model:value="formState.goodsName" style="width: 200px" placeholder="请输入商品名称" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="商品描述" name="remark">
                        <a-input v-model:value="formState.remark" style="width: 200px" placeholder="选填，不写默认为无" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="原价" name="originalPrice">
                        <a-input v-model:value="formState.originalPrice" style="width: 200px" placeholder="请输入商品原价" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="现价" name="presentPrice">
                        <a-input v-model:value="formState.presentPrice" style="width: 200px" placeholder="请输入商品现价" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="商品库存" name="stock">
                        <a-input v-model:value="formState.stock" style="width: 200px" placeholder="请输入商品库存" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="是否上架" name="status">
                        <a-radio-group v-model:value="formState.status">
                            <a-radio :value = '0'>上架</a-radio>
                            <a-radio :value = '1'>下架</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>



            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="商品所属分类" name="typeId" >
                        <a-select v-model:value="formState.typeId" @change="changeList">
                            <a-select-option v-for="item in dataList" :key="item.id" :value="item.id">{{item.typeName}}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="商品图片" name="goodsPicture">
                        <a-upload v-model:file-list="fileList"
                                  name="avatar"
                                  :beforeUpload="beforeUploadPic"
                                  :customRequest="e => picUpload(e)"
                                  list-type="picture-card"
                                  :show-upload-list="false">
                            <div v-if="!imageUrl">
                                <loading-outlined v-if="loading"></loading-outlined>
                                <plus-outlined v-else></plus-outlined>
                                <div class="ant-upload-text">Upload</div>
                            </div>
                        </a-upload>
                        <a-image :width="150" v-if="imageUrl" :src="imageUrl"></a-image>
                        <!--  <img v-if="imageUrl" :src="imageUrl" alt="avatar" />-->
<!--                        <div v-else>-->
<!--                            <loading-outlined v-if="loading"></loading-outlined>-->
<!--                            <plus-outlined v-else></plus-outlined>-->
<!--                            <div class="ant-upload-text">Upload</div>-->
<!--                        </div>-->
                    </a-form-item>
                </a-col>
            </a-row>

        </a-form>
    </a-modal>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted, computed,watch} from "vue";
import {apiGetTypeList, apiUploadImg, getImgUrl} from "../../../../api";
import { Moment } from "moment";
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

export default defineComponent({
    name: "commonModal",
    components: { LoadingOutlined, PlusOutlined},
    props: {
        data: {
            type: Object,
            required: true
        },
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            default: "新增菜单"
        },
        typeName: {
            type: String
        }
    },
    setup(props, context) {
        const formData = ref()
        const formState = computed(() => {
            return props.data
        })
        const loading = ref(false);
        const show = computed(()=> props.visible)
        const titleName = computed(()=> props.title)
        const typeName = computed(() => props.typeName)
        const state = reactive({
            treeData: JSON.parse(window.localStorage.getItem('meuns')),
            dataList: [],
            beginTime: ref(),
            endTime: ref(),
            fileList: [],
            imageUrl: '',
        })

        // 获取店铺所属分类类别
        const getTypeList = () => {
            const params = {
                limit: 1000,
                page: 1,
                name: '',
                type: 1
            }
            apiGetTypeList(params).then((res) => {
                if (res.data.code == 200) {
                    console.log(777777, res.data.data.list)
                    state.dataList = res.data.data.list
                }
            })
        }
        // 点击确定按钮
        const handleOk = () => {
            context.emit('close',typeName.value)
        }

        // 点击取消按钮
        const cancelModal = () => {
            context.emit('close', 'cancel')
        }

        // 选择option的回调
        const changeList = (value, option) => {
            // console.log(option.children[0].children)
            formState.value.typeName = option.children[0].children
        }



        // 自定义上传
        const picUpload = async (options) => {
            const params = new FormData()
            params.append('photo', options.file)
            const {data} = await apiUploadImg(params)
            if (data.code == 200) {
                formState.value.goodsPicture =data.data
                const temp = {
                    filename: data.data
                }
                const imgData = await getImgUrl(temp)
                state.imageUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(imgData.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
            } else {
                message.error(data.msg)
            }
        }

        // 上传之前
        const beforeUploadPic = (file) => {
            return new Promise((resolve, reject) => {
                if (file.type && file.type.indexOf("image/") == -1) {
                    message.error("只能上传图片文件")
                    reject()
                } else {
                    resolve(file)
                }
            })
        }

        watch(show,  async () => {
            console.log(show.value)
            if (!show) {
                state.imageUrl = ''
            } else {
                // 此时打开了对话框
                if (titleName.value == '编辑菜单') {
                    // 调用接口获取图片
                    const params = {
                        filename: formState.value.goodsPicture
                    }
                    const imgData = await getImgUrl(params)
                    state.imageUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(imgData.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
                } else {
                    state.imageUrl = ''
                }
            }
        })

        onMounted(()=> {
            getTypeList()
        })

        return {
            ...toRefs(state),
            formData,
            loading,
            formState,
            show,
            titleName,
            handleOk,
            cancelModal,
            changeList,
            picUpload,
            beforeUploadPic,
        }
    }
})
</script>

<style scoped>

</style>